<template>
  <div class="settings-container">
    <el-card class="settings-card">
      <template #header>
        <div class="card-header">
          <span>系统设置</span>
        </div>
      </template>

      <el-form
        ref="formRef"
        :model="settings"
        :rules="rules"
        label-width="120px"
        class="settings-form"
      >
        <!-- 基本设置 -->
        <h3>基本设置</h3>
        <el-form-item label="用户名" prop="username">
          <el-input v-model="settings.username" />
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="settings.email" />
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input v-model="settings.phone" />
        </el-form-item>

        <!-- 安全设置 -->
        <h3>安全设置</h3>
        <el-form-item label="修改密码">
          <el-button @click="showChangePassword = true">
            修改密码
          </el-button>
        </el-form-item>
        <el-form-item label="两步验证">
          <el-switch v-model="settings.twoFactorEnabled" />
        </el-form-item>

        <!-- 通知设置 -->
        <h3>通知设置</h3>
        <el-form-item label="邮件通知">
          <el-switch v-model="settings.emailNotification" />
        </el-form-item>
        <el-form-item label="消息通知">
          <el-switch v-model="settings.messageNotification" />
        </el-form-item>

        <!-- 隐私设置 -->
        <h3>隐私设置</h3>
        <el-form-item label="在线状态">
          <el-switch v-model="settings.showOnlineStatus" />
        </el-form-item>
        <el-form-item label="已读回执">
          <el-switch v-model="settings.readReceipt" />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="saveSettings">
            保存设置
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 修改密码对话框 -->
    <el-dialog
      v-model="showChangePassword"
      title="修改密码"
      width="400px"
    >
      <el-form
        ref="passwordFormRef"
        :model="passwordForm"
        :rules="passwordRules"
        label-width="100px"
      >
        <el-form-item label="当前密码" prop="currentPassword">
          <el-input
            v-model="passwordForm.currentPassword"
            type="password"
            show-password
          />
        </el-form-item>
        <el-form-item label="新密码" prop="newPassword">
          <el-input
            v-model="passwordForm.newPassword"
            type="password"
            show-password
          />
        </el-form-item>
        <el-form-item label="确认密码" prop="confirmPassword">
          <el-input
            v-model="passwordForm.confirmPassword"
            type="password"
            show-password
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showChangePassword = false">取消</el-button>
          <el-button type="primary" @click="changePassword">
            确认修改
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus'

// 状态
const formRef = ref<FormInstance>()
const passwordFormRef = ref<FormInstance>()
const showChangePassword = ref(false)

// 设置表单数据
const settings = ref({
  username: '张三',
  email: 'zhangsan@example.com',
  phone: '13800138000',
  twoFactorEnabled: false,
  emailNotification: true,
  messageNotification: true,
  showOnlineStatus: true,
  readReceipt: true
})

// 密码表单数据
const passwordForm = ref({
  currentPassword: '',
  newPassword: '',
  confirmPassword: ''
})

// 表单验证规则
const rules = ref<FormRules>({
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
  ],
  email: [
    { required: true, message: '请输入邮箱地址', trigger: 'blur' },
    { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
  ],
  phone: [
    { required: true, message: '请输入手机号', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
  ]
})

// 密码表单验证规则
const passwordRules = ref<FormRules>({
  currentPassword: [
    { required: true, message: '请输入当前密码', trigger: 'blur' }
  ],
  newPassword: [
    { required: true, message: '请输入新密码', trigger: 'blur' },
    { min: 6, message: '密码长度不能小于 6 个字符', trigger: 'blur' }
  ],
  confirmPassword: [
    { required: true, message: '请确认密码', trigger: 'blur' },
    {
      validator: (rule, value, callback) => {
        if (value !== passwordForm.value.newPassword) {
          callback(new Error('两次输入的密码不一致'))
        } else {
          callback()
        }
      },
      trigger: 'blur'
    }
  ]
})

// 方法
const saveSettings = async () => {
  if (!formRef.value) return
  
  try {
    await formRef.value.validate()
    // 这里应该调用后端 API 保存设置
    ElMessage.success('设置保存成功')
  } catch (error) {
    ElMessage.error('设置保存失败')
  }
}

const changePassword = async () => {
  if (!passwordFormRef.value) return
  
  try {
    await passwordFormRef.value.validate()
    // 这里应该调用后端 API 修改密码
    ElMessage.success('密码修改成功')
    showChangePassword.value = false
    passwordForm.value = {
      currentPassword: '',
      newPassword: '',
      confirmPassword: ''
    }
  } catch (error) {
    ElMessage.error('密码修改失败')
  }
}
</script>

<style scoped lang="scss">
.settings-container {
  padding: 20px;
  
  .settings-card {
    max-width: 800px;
    margin: 0 auto;
    
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .settings-form {
      h3 {
        margin: 20px 0;
        padding-bottom: 10px;
        border-bottom: 1px solid #dcdfe6;
        color: #303133;
      }
    }
  }
}
</style> 